<template>
	<div class="card-box">
		<div v-for="(item, index) in list" :key="index">
			<p class="title">{{ item.title }}</p>
			<!-- 带图片区域 -->
			<div v-if="item.children.length" class="flex item">
				<div v-for="(citem, cindex) in item.children" :key="cindex" class="flex img-item">
					<img v-if="item.type === 'img'" :src="citem.img" />
					<div class="mg-left">
						<span>{{ citem.nav }}</span>
						<p>{{ citem.props ? cardData[citem.props] : citem.value }} {{ citem.unit ? citem.unit : '' }}
						</p>
					</div>
				</div>
			</div>
			<!-- 拓展数组 -->
			<div v-if="item?.subChildren" class="item">
				<div class="flex subChildren-item" v-for="(sitem, sindex) in item.subChildren" :key="sindex">
					<div class="mg-left">
						<span>道路名称</span>
						<p>{{ sitem.name }}</p>
					</div>
					<div class="mg-left">
						<span>道路等级</span>
						<p>{{ sitem.ghdldj }}路</p>
					</div>
					<div class="mg-left">
						<span>车道数</span>
						<p>{{ sitem.jdcds }}</p>
					</div>
					<div class="mg-left">
						<span>平均速度</span>
						<p>{{ sitem.congestSpeed }} km/h</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed
	} from 'vue';
	export default defineComponent({
		props: {
			list: {
				type: Array,
				default: () => {
					return [];
				},
			},
			data: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},
		setup(props) {
			const state = reactive({
				list: props.list,
				cardData: computed(() => props.data),
			});
			console.log(state.cardData, 'Jsjd ');
			return {
				...toRefs(state),
			};
		},
	});
</script>
<style lang="less" scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.card-box {
		max-height: 36vh;
		overflow-y: auto;

		.title {
			background: url(../../../assets/images/analysis/title-bg.png) no-repeat;
			background-size: 110% 100%;
			padding-left: 20px;
			height: 25px;
			line-height: 20px;
			color: #fff;
			text-shadow: 0px 0px 4px #4e85ff, 0px 1px 4px #0093ff;
		}

		.item {
			margin: 15px 0;

			.img-item {
				width: 40%;

				img {
					width: 20%;
				}
			}

			.mg-left {
				margin-left: 10px;
			}

			span {
				font-size: 12px;
				display: block;
				white-space: nowrap;
				color: #d9dbde;
			}

			p {
				font-size: 14px;
				color: #fff;
			}
		}

		.subChildren-item {
			margin-bottom: 1vw;

			.mg-left {
				flex: 1;
			}
		}

		&>div:last-child {
			.item {
				margin-bottom: 0;
			}
		}
	}
</style>